<script setup>
import { ref, onMounted } from "vue";
import {
  useAllCommunityList,
  useTicketStatus,
  useRoleStatus,
} from "@/hooks/index.js";
import { getTicketListApi, delTicketApi } from "@/api/ticket";
import TableList from "@/components/TableList/index.vue";
import PaginationBox from "@/components/PaginationBox/index.vue";
import AddForm from "./components/AddForm.vue";
import { ElMessage } from "element-plus";

// 搜索表单
const communityList = useAllCommunityList();
const TicketList = useTicketStatus();
const stateList = useRoleStatus();

const defaultData = () => ({
  current: 1,
  pageSize: 10,
  community_code: null,
  title: "",
  multi: "",
  status: "",
});

const queryData = ref(defaultData());

const onSearch = () => {
  queryData.value.current = 1;
  initData();
};

const onReset = () => {
  queryData.value = defaultData();
  initData();
};

// 表格区域
const list = ref([]);
const total = ref(0);

const initData = async () => {
  const { data } = await getTicketListApi(queryData.value);
  // console.log(res)
  list.value = data.rows;
  total.value = data.count;
};

const columns = [
  {
    label: "ID",
    prop: "id",
  },
  {
    label: "小区名称",
    prop: "community",
    type: "position",
  },
  {
    label: "标题",
    prop: "title",
  },
  {
    label: "图片内容",
    prop: "img_url",
    type: "picture",
  },
  {
    label: "类型",
    prop: "multi",
  },
  {
    label: "状态",
    prop: "status",
  },
  {
    label: "选项个数",
    prop: "options",
  },
  {
    label: "创建者",
    prop: "sys_user",
  },
  {
    label: "开始时间",
    prop: "start_time",
    type: "time",
  },
  {
    label: "结束时间",
    prop: "end_time",
    type: "time",
  },
  {
    label: "创建时间",
    prop: "create_time",
    type: "time",
  },
  {
    label: "操作",
    type: "action",
  },
];

// 处理类型
const showMulti = (val) => {
  const res = useTicketStatus().find((item) => item.value === val * 1);
  return res ? res.label : "-";
};
// 处理状态
const showState = (val) => {
  const res = useRoleStatus().find((item) => item.value === val * 1);
  return res ? res.label : "-";
};

onMounted(() => {
  initData();
});

// 新增修改
const addRef = ref();

// 删除
const delRow = async (id) => {
  // console.log(id);
  await delTicketApi(id);
  ElMessage.success("删除成功");
  initData();
};
</script>

<template>
  <div class="app-container">
    <h1>投票管理</h1>
    <el-card>
      <!-- 搜索表单 -->
      <el-form inline label-position="top">
        <el-form-item label="小区名称">
          <el-select
            v-model="queryData.community_code"
            placeholder="请选择"
            clearable
            @clear="initData"
          >
            <!-- @change="changeCommunity" -->
            <el-option
              v-for="item in communityList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model="queryData.title"
            placeholder="请输入"
            clearable
            @clear="initData"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="queryData.multi"
            placeholder="请选择"
            clearable
            @clear="initData"
          >
            <el-option
              v-for="item in TicketList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="queryData.status"
            placeholder="请选择"
            clearable
            @clear="initData"
          >
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <!-- 主体部分 -->
    <el-card>
      <!-- 工具栏 -->
      <el-row :gutter="20" justify="end">
        <div></div>
        <div>
          <el-button type="primary" @click="addRef.isShow = true"
            >新增投票</el-button
          >
        </div>
      </el-row>
      <br />
      <!-- 表格 -->
      <TableList
        :list="list"
        :columns="columns"
        @handleDel="delRow($event)"
        @handleEdit="addRef.replyData($event)"
      >
        <template #otherType="{ row, data }">
          <template v-if="data === 'multi'">
            {{ showMulti(row[data]) }}
          </template>
          <template v-if="data === 'status'">
            {{ showState(row[data]) }}
          </template>
          <template v-if="data === 'options'">
            {{ row[data].length }}个
          </template>
          <template v-if="data === 'sys_user'">
            {{ row[data].nickname }}
            ({{ row[data].username }})
          </template>
        </template>
      </TableList>
      <br />
      <!-- 分页 -->
      <PaginationBox
        :queryData="queryData"
        :total="total"
        @changePageSize="initData"
        @changePageNum="initData"
      ></PaginationBox>
    </el-card>
    <!-- 新增修改抽屉 -->
    <AddForm ref="addRef" @updateList="initData"></AddForm>
  </div>
</template>

<style scoped></style>
